<template>
  <a-layout class="layout">
    <!-- 数据初始化组件 -->
    <DataInitializer />
    
    <a-layout-header class="header">
      <div class="header-container">
        <div class="logo">
          <router-link to="/">
            <img src="../assets/logo.svg" alt="提示词工具" />
            <span class="logo-text">提示词宝库</span>
          </router-link>
        </div>
        <a-menu
          v-model:selectedKeys="selectedKeys"
          theme="dark"
          mode="horizontal"
          :style="{ lineHeight: '64px' }"
          class="nav-menu"
        >
          <a-menu-item key="home">
            <router-link to="/">首页</router-link>
          </a-menu-item>
          <a-menu-item key="prompts">
            <router-link to="/prompts">提示词库</router-link>
          </a-menu-item>
          <a-menu-item key="pricing">
            <router-link to="/pricing">会员方案</router-link>
          </a-menu-item>
          <a-menu-item v-if="isLoggedIn" key="user">
              <router-link to="/user">{{ userDisplayName }}</router-link>
            </a-menu-item>
        </a-menu>
        <div class="user-actions">
          <a-menu
            v-model:selectedKeys="userSelectedKeys"
            theme="dark"
            mode="horizontal"
            :style="{ lineHeight: '64px' }"
          >
            <a-menu-item v-if="!isLoggedIn" key="login">
              <router-link to="/auth/login">登录</router-link>
            </a-menu-item>
            <a-menu-item v-if="!isLoggedIn" key="register">
              <router-link to="/auth/register">注册</router-link>
            </a-menu-item>
            <a-menu-item v-if="isLoggedIn" key="logout" @click="logout">
              退出登录
            </a-menu-item>
            <a-menu-item v-if="isAdmin" key="admin">
              <router-link to="/admin">管理后台</router-link>
            </a-menu-item>
          </a-menu>
        </div>
      </div>
    </a-layout-header>
    <a-layout-content class="layout-content">
      <div class="content-container">
        <router-view />
      </div>
    </a-layout-content>
    <a-layout-footer style="text-align: center">
      智能提示词管理与分享平台 ©2023
    </a-layout-footer>
  </a-layout>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '../store/auth'
import DataInitializer from '../components/DataInitializer.vue'
import { maskUserDisplayName } from '../utils/privacy'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()
const selectedKeys = ref([route.name])
const userSelectedKeys = ref([])

// 监听路由变化，更新选中的菜单项
watch(
  () => route.name,
  (newVal) => {
    selectedKeys.value = [newVal]
  }
)

// 页面加载时获取用户信息
onMounted(async () => {
  if (authStore.token && !authStore.user) {
    await authStore.fetchCurrentUser()
  }
})

const isLoggedIn = computed(() => {
  return authStore.isAuthenticated
})

const isAdmin = computed(() => {
  return authStore.isAdmin
})

const userDisplayName = computed(() => {
  if (!authStore.user) return '个人中心';
  
  let displayName = '';
  let type = 'auto';
  
  // 优先显示姓名
  const fullName = `${authStore.user.first_name || ''} ${authStore.user.last_name || ''}`.trim();
  if (fullName) {
    displayName = fullName;
    type = 'name';
  } else if (authStore.user.username) {
    // 其次显示用户名
    displayName = authStore.user.username;
    type = 'username';
  } else if (authStore.user.email) {
    // 最后显示邮箱
    displayName = authStore.user.email;
    type = 'email';
  } else {
    return '个人中心';
  }
  
  // 应用脱敏处理
  return maskUserDisplayName(displayName, type);
})

const logout = () => {
  authStore.logoutUser()
  router.push('/auth/login')
}
</script>

<style scoped>
.layout {
  min-height: 100vh;
  width: 100%;
  background: #fff;
}

.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  padding: 0;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.header-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  float: left;
  margin-right: 30px;
}

.logo img {
  height: 32px;
  margin-right: 10px;
  vertical-align: middle;
}

.logo-text {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  vertical-align: middle;
}

.nav-menu {
  flex: 1;
}

.user-actions {
  margin-left: auto;
}

.layout-content {
  padding: 0;
  background: #f0f2f5;
  width: 100%;
  margin: 0;
}

.content-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px;
  min-height: 280px;
  background: #fff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 10px;
  }
  
  .logo {
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
  }
  
  .nav-menu, .user-actions {
    width: 100%;
  }
  
  .layout-content {
    padding: 0 10px !important;
  }
  
  .content-container {
    padding: 16px 15px !important;
    max-width: none !important;
  }
}

@media (max-width: 576px) {
  .layout-content {
    padding: 0 10px !important;
  }
  
  .content-container {
    padding: 12px 10px !important;
    min-height: 200px !important;
    max-width: none !important;
  }
}
</style>